import { chartColor } from "@/utils/chartColor";
import { bar } from "@/components/Charts/bar";
import * as echarts from "echarts";
import { features } from "vue-flv-player";
/**
 * @name 工单情况
 * @description list:单位列表 total:总数 wcs :完成数  wcl:完成率
 */
export const gongdanOptions = (list, total, wcs, wcl, dataZoomMove) => {
  let barWidth = 24,
    barGap = 1;
  return {
    backgroundColor: "",
    grid: {
      left: "40",
      top: "60",
      right: "50",
      bottom: "60"
    },
    title: {
      text: "",
      left: "center",
      top: 0,
      textStyle: {
        fontSize: 16,
        lineHeight: 25,
        color: chartColor().title
      }
    },
    dataZoom: [
      {
        type: "slider",
        show: true, //flase直接隐藏图形
        xAxisIndex: [0],
        left: "5%", //滚动条靠左侧的百分比
        right: 50,
        bottom: 0,
        textStyle: {
          color: chartColor().drak
        },
        start: dataZoomMove ? dataZoomMove.start : 0, //滚动条的起始位置
        end: dataZoomMove ? dataZoomMove.end : 15, //滚动条的截止位置（按比例分割你的柱状图x轴长度）
        maxSpan: dataZoomMove ? dataZoomMove.end : 15
      }
    ],
    legend: {
      data: ["总数", "完成数", "完成率"],

      top: "0",
      right: "0",
      textStyle: {
        color: chartColor().drak,
        fontSize: 14
      }
    },
    xAxis: {
      data: list,
      axisLine: {
        show: true, //隐藏X轴轴线
        lineStyle: {
          color: "#f1f1f1",
          width: 1
        }
      },

      axisTick: {
        show: true, //隐藏X轴刻度
        alignWithLabel: true
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: chartColor().drak, //X轴文字颜色
          fontSize: 14
        },
        rotate: 0,
        interval: 0,
        formatter: function(value) {
          let rowMAx = 2;
          let overValue = "";
          if (value.length > 10) {
            overValue = value.slice(0, 10) + "...";
          } else {
            overValue = value;
          }
          return overValue;
        }
      }
    },
    yAxis: [
      {
        type: "value",
        name: "",
        max:
          Math.max(...total) > 100
            ? Math.max(...total) + Math.floor(Math.max(...total) / 3)
            : Math.max(...total) + 10,
        nameTextStyle: {
          color: chartColor().drak,
          fontSize: 14
        },
        splitLine: {
          show: true,
          lineStyle: {
            width: 1,
            color: "#f1f1f1"
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: true, //隐藏X轴轴线
          lineStyle: {
            color: "#f1f1f1",
            width: 1
          }
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: chartColor().drak,
            fontSize: 14
          }
        }
      },
      {
        type: "value",
        name: "",
        nameTextStyle: {
          color: chartColor().drak,
          fontSize: 14
        },
        position: "right",
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: true, //隐藏X轴轴线
          lineStyle: {
            color: "#f1f1f1",
            width: 1
          }
        },
        axisLabel: {
          show: true,
          formatter: "{value} %", //右侧Y轴文字显示
          textStyle: {
            color: chartColor().drak,
            fontSize: 14
          }
        }
      }
    ],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985"
        }
      }
    },
    series: [
      {
        name: "总数",
        type: "bar",
        barWidth: barWidth,
        barGap: barGap,
        itemStyle: {
          normal: {
            color: "#0674cb"
            // new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //   {
            //     offset: 0,
            //     color: "#00FFFF"
            //   },
            //   {
            //     offset: 1,
            //     color: "#0090d9"
            //   }
            // ])
          }
        },
        label: {
          normal: {
            show: true,
            position: "top",
            textStyle: {
              color: chartColor().drak,
              fontSize: "14"
            }
          }
        },
        data: total
      },
      {
        name: "完成数",
        type: "bar",
        barWidth: barWidth,
        barGap: barGap,
        itemStyle: {
          normal: {
            color: "#56ac27"
            // new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //   {
            //     offset: 0,
            //     color: "#28f3ca"
            //   },
            //   {
            //     offset: 1,
            //     color: "#18a689"
            //   }
            // ])
          }
        },
        label: {
          normal: {
            show: true,
            position: "top",

            textStyle: {
              color: chartColor().drak,
              fontSize: "14"
            }
          }
        },
        data: wcs
      },
      {
        name: "完成率",
        type: "line",
        barGap: barGap,
        yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
        showAllSymbol: true, //显示所有图形。
        symbol: "circle", //标记的图形为实心圆
        symbolSize: 6, //标记的大小
        itemStyle: {
          //折线拐点标志的样式
          color: "#e74902",
          //   borderColor: "#e74902",
          width: 2,
          //   shadowColor: "#e74902",
          shadowBlur: 1
        },
        lineStyle: {
          color: "#e74902", // "#26D9FF",
          width: 1,
          shadowBlur: 1
        },
        label: {
          normal: {
            show: true,
            position: "botttom",
            padding: 12,
            formatter: [" {a|{c}%}"].join(","),
            rich: {
              a: {
                color: chartColor().drak,
                align: "center",
                fontSize: 18
              }
            }
          }
        },
        data: wcl
      }
    ]
  };
};

/**
 * @name 报障类型
 * @description lei
 */
export const baozTypeOptions = (leixingData, tooltip = "报障类型统计") => {
  let xData = [];
  let yData = [];
  let dataChart = [];
  let colorList = chartColor().colorList;
  leixingData.forEach((e, index) => {
    xData.push(e.name);
    yData.push(e.total);
    dataChart.push({
      name: e.name,
      value: e.total,
      color: colorList[index]
    });
  });
  return {
    title: {
      text: "", // 饼图标题文本
      left: "center", // 标题居中显示
      textStyle: {
        color: chartColor().title,
        fontWeight: "bold" // 标题字体加粗
      }
    },
    grid: {
      left: "40",
      top: "60",
      right: "50",
      bottom: "80"
    },
    // 设置提示框样式配置
    tooltip: {
      trigger: "item", // 提示框触发方式为数据项触发
      padding: [8, 16], // 提示框内边距
      textStyle: {
        color: "#fff", // 提示框文本颜色为灰色
        fontSize: 16 // 提示框文本字体大小为16px
      },
      // 自定义提示框内容格式化函数
      formatter: function(params) {
        // 返回自定义的提示框内容
        return (
          tooltip +
          "<br />" +
          params.marker + // 数据项标记
          '<span style="color:' +
          params.color +
          '">' +
          params.data["name"] + // 数据项名称
          "\n" +
          '<span style="color:#fff">' +
          params.data["value"] + // 数据项值
          "</span></span>"
        );
      }
    },
    // 设置图例配置
    legend: {
      //   orient: "vertical", // 图例排列方向为垂直
      bottom: 0, // 图例距离容器上边缘的距离为20px
      //   left: 20, // 图例距离容器左边缘的距离为40px
      itemWidth: 15, // 图例项宽度为15px
      itemHeight: 10, // 图例项高度为10px
      //   itemGap: 25, // 图例项间隔为25px
      borderRadius: 4, // 图例项圆角为4px
      textStyle: {
        color: chartColor().drak, // 图例文本颜色为黑色
        fontFamily: "Alibaba PuHuiTi", // 图例文本字体为"Alibaba PuHuiTi"
        fontSize: 14, // 图例文本字体大小为14px
        fontWeight: 400 // 图例文本字体粗细为400
      },
      formatter: function(labelName) {
        for (let index = 0; index < dataChart.length; index++) {
          const { name, value, percentage } = dataChart[index];
          if (dataChart[index].name == labelName) {
            return `${labelName}   ${value}   `;
          }
        }
      }
    },
    // 设置饼图系列配置
    series: [
      {
        name: "Access From", // 系列名称
        type: "pie", // 系列类型为饼图
        radius: "65%", // 饼图半径为整个容器的50%
        center: ["50%", "50%"], // 饼图中心位置为容器的中心
        // 饼图数据项配置
        data: dataChart,
        emphasis: {
          itemStyle: {
            shadowBlur: 0,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0)"
          }
        },
        label: {
          show: true,
          textStyle: {
            fontSize: 16
          },
          formatter: function(params) {
            var name = params.name;
            var percent = params.percent;
            return name + "\n" + percent + "%";
          }
        },
        // 饼图数据项样式配置
        itemStyle: {
          borderRadius: 8, // 扇区圆角为8px
          borderWidth: 2, // 扇区边框宽度为2px
          borderColor: "#fff", // 扇区边框颜色为白色
          // 设置每个扇区的颜色
          color: function(params) {
            return params.data.color; // 根据数据项中的color属性设置颜色
          }
        }
      }
    ]
  };
};
/**
 * @name 资产类型
 * @description lei
 */
export const propertyTypeOptions = leixingData => {
  let xData = [];
  let yData = [];
  let dataChart = [];
  let colorList = chartColor().colorList;
  leixingData.forEach((e, index) => {
    xData.push(e.name);
    yData.push(e.total);
    dataChart.push({
      name: e.name,
      value: e.total,
      color: colorList[index]
    });
  });
  return {
    title: {
      text: "", // 饼图标题文本
      left: "center", // 标题居中显示
      textStyle: {
        color: chartColor().title,
        fontWeight: "bold" // 标题字体加粗
      }
    },
    grid: {
      left: "40",
      top: "60",
      right: "50",
      bottom: "80"
    },
    // 设置提示框样式配置
    tooltip: {
      trigger: "item", // 提示框触发方式为数据项触发
      padding: [8, 16], // 提示框内边距
      textStyle: {
        color: "#fff", // 提示框文本颜色为灰色
        fontSize: 16 // 提示框文本字体大小为16px
      },
      // 自定义提示框内容格式化函数
      formatter: function(params) {
        // 返回自定义的提示框内容
        let list = leixingData.filter(e => {
          return e.name == params.data["name"];
        });
        let html = "";
        if (list.length) {
          list[0].erjiTotalList.forEach(ev => {
            html +=
              params.marker + // 数据项标记
              '<span style="color:' +
              params.color +
              '">' +
              ev.name + // 数据项名称
              "\n" +
              '<span style="color:#fff">' +
              ev.total + // 数据项值
              "</span></span>" +
              "<br />";
          });
        }
        return "类型统计" + "<br />" + html;
      }
    },
    // 设置图例配置
    legend: {
      //   orient: "vertical", // 图例排列方向为垂直
      bottom: 0, // 图例距离容器上边缘的距离为20px
      //   left: 20, // 图例距离容器左边缘的距离为40px
      itemWidth: 15, // 图例项宽度为15px
      itemHeight: 10, // 图例项高度为10px
      //   itemGap: 25, // 图例项间隔为25px
      borderRadius: 4, // 图例项圆角为4px
      textStyle: {
        color: chartColor().drak, // 图例文本颜色为黑色
        fontFamily: "Alibaba PuHuiTi", // 图例文本字体为"Alibaba PuHuiTi"
        fontSize: 14, // 图例文本字体大小为14px
        fontWeight: 400 // 图例文本字体粗细为400
      },
      formatter: function(labelName) {
        for (let index = 0; index < dataChart.length; index++) {
          const { name, value, percentage } = dataChart[index];
          if (dataChart[index].name == labelName) {
            return `${labelName}   ${value}   `;
          }
        }
      }
    },
    // 设置饼图系列配置
    series: [
      {
        name: "Access From", // 系列名称
        type: "pie", // 系列类型为饼图
        radius: "65%", // 饼图半径为整个容器的50%
        center: ["50%", "50%"], // 饼图中心位置为容器的中心
        // 饼图数据项配置
        data: dataChart,
        emphasis: {
          itemStyle: {
            shadowBlur: 0,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0)"
          }
        },
        label: {
          show: true,
          textStyle: {
            fontSize: 16
          },
          formatter: function(params) {
            var name = params.name;
            var percent = params.percent;
            return name + "\n" + percent + "%";
          }
        },
        // 饼图数据项样式配置
        itemStyle: {
          borderRadius: 8, // 扇区圆角为8px
          borderWidth: 2, // 扇区边框宽度为2px
          borderColor: "#fff", // 扇区边框颜色为白色
          // 设置每个扇区的颜色
          color: function(params) {
            return params.data.color; // 根据数据项中的color属性设置颜色
          }
        }
      }
    ]
  };
};
/**
 * @name 报障方式
 * @description list：单位列表  	xcx：小程序报障		saomiao：扫码报障	dianhua：电话报障
 */
export const fangshiOptions = (list, xcx, saoma, dianhua) => {
  let barWidth = 24,
    barGap = 1;
  return {
    backgroundColor: "",
    grid: {
      left: "40",
      top: "60",
      right: "0",
      bottom: "60"
    },
    title: {
      text: "",
      left: "center",
      top: 0,
      textStyle: {
        fontSize: 16,
        lineHeight: 25,
        color: chartColor().title
      }
    },
    dataZoom: [
      {
        type: "slider",
        show: true, //flase直接隐藏图形
        xAxisIndex: [0],
        left: "5%", //滚动条靠左侧的百分比
        right: 50,
        bottom: 0,
        textStyle: {
          color: chartColor().drak
        },
        start: 0, //滚动条的起始位置
        end: 5, //滚动条的截止位置（按比例分割你的柱状图x轴长度）
        maxSpan: 5
      }
    ],
    legend: {
      data: ["小程序报障", "扫码报障", "电话报障"],
      top: "0",
      right: "0",
      textStyle: {
        color: chartColor().drak,
        fontSize: 14
      }
    },
    xAxis: {
      data: list,
      axisLine: {
        show: true, //隐藏X轴轴线
        lineStyle: {
          color: "#f1f1f1",
          width: 1
        }
      },

      axisTick: {
        show: true, //隐藏X轴刻度
        alignWithLabel: true
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: chartColor().drak, //X轴文字颜色
          fontSize: 14
        },
        rotate: 0,
        interval: 0
      }
    },
    yAxis: [
      {
        type: "value",
        name: "",
        // max: 400,
        nameTextStyle: {
          color: chartColor().drak,
          fontSize: 14
        },
        splitLine: {
          show: true,
          lineStyle: {
            width: 1,
            color: "#f1f1f1"
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: chartColor().drak,
            fontSize: 14
          }
        }
      }
    ],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985"
        }
      }
    },
    series: [
      {
        name: "小程序报障",
        type: "bar",
        barWidth: barWidth,
        barGap: barGap,
        itemStyle: {
          normal: {
            color: "#0674cb"
          }
        },
        label: {
          normal: {
            show: true,
            position: "top",
            textStyle: {
              color: chartColor().drak,
              fontSize: "18"
            }
          }
        },
        data: xcx
      },
      {
        name: "扫码报障",
        type: "bar",
        barWidth: barWidth,
        barGap: barGap,
        itemStyle: {
          normal: {
            color: "#56ac25"
          }
        },
        label: {
          normal: {
            show: true,
            position: "top",
            textStyle: {
              color: chartColor().drak,
              fontSize: "18"
            }
          }
        },
        data: saoma
      },
      {
        name: "电话报障",
        type: "bar",
        barWidth: barWidth,
        barGap: barGap,
        itemStyle: {
          normal: {
            color: "#ea4903"
          }
        },
        label: {
          normal: {
            show: true,
            position: "top",
            textStyle: {
              color: chartColor().drak,
              fontSize: "18"
            }
          }
        },
        data: dianhua
      }
    ]
  };
};

/**
 * @name 事件类型统计
 * @description	xData, yData, baozhangTotal
 */
export const shijianOptions = (xData, yData, baozhangTotal) => {
  return bar(
    {
      label: {
        show: true,
        position: "top",
        color: "#495057",
        fontSize: 14
      },

      barWidth: "24",
      barCategoryGap: "60%",
      itemStyle: {
        borderColor: "rgba(0,0,0,0)",
        normal: {
          color: function(params) {
            // 给出颜色组
            var colorList = [
              "#e15e30",
              "#e15e30",
              "#e15e30",
              "#f3a916",
              "#f3a916",
              "#f3a916",
              "#0674cb",
              "#0674cb",
              "#0674cb"
            ];
            return colorList[params.dataIndex];
          }
        }
        // color: {
        //   type: "linear",
        //   x: 0,
        //   y: 0,
        //   x2: 0,
        //   y2: 1,
        //   colorStops: [
        //     {
        //       offset: 0,
        //       color: "#e15e30"
        //     },
        //     {
        //       offset: 1,
        //       color: "#e15e30"
        //     }
        //   ],
        //   globalCoord: false
        // }
      },
      data: yData
    },
    {
      title: {
        text: "",
        textAlign: "center",
        left: "50%",
        textStyle: {
          color: chartColor().title,
          fontSize: 16,
          lineHeight: 25
        }
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow"
        },
        backgroundColor: "rgba(9, 24, 48, 0.5)",
        borderColor: "rgba(255,255,255,0.4)",
        textStyle: {
          color: "#fff",
          align: "left",
          textAlign: "left"
        },
        formatter: fp => {
          return `${fp[0].name}:${fp[0].value} \n占比：${(
            (fp[0].value / baozhangTotal) *
            100
          ).toFixed(2)}%`;
        },
        extraCssText: "white-space:pre-wrap",
        borderWidth: 1
      },
      grid: {
        show: false,
        top: "10",
        left: "40",
        right: "30",
        bottom: "50",
        borderColor: "#495057"
      },
      xAxis: {
        type: "category",
        data: xData,
        axisLabel: {
          color: "#495057",
          align: "middle",
          fontSize: 14,
          interval: 0,
          margin: 20,
          rotate: 0,
          formatter: function(value) {
            let rowMAx = 4;
            let overValue = "";
            for (let i = 0; i < value.length; i++) {
              if (i == 4 && i != 0) {
                overValue += "\n";
                overValue += value[i];
              } else {
                overValue += value[i];
              }
            }
            return overValue;
          }
        },
        axisLine: {
          lineStyle: {
            color: "#495057"
          }
        }
      },
      yAxis: {
        type: "value",
        show: true,
        axisLabel: {
          color: "#495057",
          fontSize: 14
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#6C9DFF"
          }
        },
        splitLine: {
          lineStyle: {
            color: "rgba(0,0,0,0.2)"
          }
        }
      }
    }
  );
};

export const tongjiOptions = (xData, yData, listData) => {
  return {
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {
          show: true,
          title: "保存图片",
          excludeComponents: ["toolbox"],
          pixelRatio: 1,
          backgroundColor: "#fff"
        }
      }
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    legend: {
      show: false
    },
    grid: {
      top: 30,
      left: "3%",
      right: 30,
      bottom: "3%",
      containLabel: true
    },
    xAxis: {
      type: "value",
      boundaryGap: [0, 0.01],
      axisLabel: {
        color: "#495057",
        fontSize: 14
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#ccc"
        }
      },
      splitLine: {
        lineStyle: {
          color: "rgba(0,0,0,0.2)"
        }
      }
    },
    yAxis: {
      type: "category",
      data: xData,
      axisLabel: {
        color: "#495057",
        fontSize: 14,
        formatter: function(value) {
          let rowMAx = 2;
          let overValue = "";
          if (value.indexOf("vip") > -1 || value.indexOf("未达成") > -1) {
            rowMAx = 3;
          }
          for (let i = 0; i < value.length; i++) {
            if (i == rowMAx && i != 0) {
              overValue += "\n";
              overValue += value[i];
            } else {
              overValue += value[i];
            }
          }
          return overValue;
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#ccc"
        }
      },
      splitLine: {
        lineStyle: {
          color: "rgba(0,0,0,0.2)"
        }
      }
    },
    series: [
      {
        // name: "2011",
        type: "bar",
        barWidth: 24,
        data: yData,
        itemStyle: {
          borderColor: "rgba(0,0,0,0)",
          normal: {
            label: {
              show: true,
              position: "insideLeft",
              offset: [284, 0],
              textStyle: {
                //数值样式，显示的文字大小和颜色
                fontSize: "14",
                color: "rgba(0,0,0,1)",
                fontWeight: 400,
                lineHeight: "18"
              }
            },
            color: function(params) {
              // 给出颜色组
              var colorList = [
                "#e15e30",
                "#e15e30",
                "#e15e30",
                "#f3a916",
                "#f3a916",
                "#f3a916",
                "#0674cb",
                "#0674cb",
                "#0674cb"
              ];
              return colorList[params.dataIndex];
            }
          }
        }
      }
    ]
    //   seriesList
  };
};
